<script setup>
import { ref, onMounted } from 'vue';
import { ArrowLeftBold, ArrowRight, ArrowRightBold, QuestionFilled } from "@element-plus/icons-vue";
import router from "@/router";
// 定义岗位信息数组
const jobList = ref([
  {
    jobId: '前端开发',
    match: '88%'
  },
  {
    jobId: 'UI设计',
    match: '77%'
  },
  {
    jobId: 'C++开发',
    match: '36%'
  },
]);


function matchClass(match) {
  const matchValue = parseInt(match);
  if (matchValue > 80) {
    return 'green-match';
  } else if (matchValue < 50) {
    return 'red-match';
  }
  return '';
}
function next(index) {
  const job = jobList.value[index];
  router.push(`/companies/${job.jobId}`); // 导航到对应的 company 界面
}
const resume = () => {
  // 这里添加你的登录逻辑
  // 假设登录成功后，跳转到仪表盘页面
  router.push('/resume');
};
const myDeliver = () => {
  // 这里添加你的登录逻辑
  // 假设登录成功后，跳转到仪表盘页面
  router.push('/myDeliver');
};
const exit = () => {
  router.push('/');
}
</script>

<template>
  <div class="body1" style="background-color: #DBE2EF;background-size: cover;">
    <el-row justify="center" style="margin-top: 80px">
      <el-col :span="16" style="justify-content: center;text-align: center;">
        <div class="card3" style="background-color: #f9f7f7">
          <label class="post_label">推荐岗位</label>
          <el-row justify="end" style="margin-right: 50px">
            <label style="color: #888888">匹配度</label>
            <el-icon size="25px" color="#888888"><QuestionFilled /></el-icon>
          </el-row>
          <el-row v-for="(job, index) in jobList" :key="index" style="font-size: 28px; margin-top: 30px; display: flex; justify-content: center;">
            <div  style="display: flex; justify-content: space-between; align-items: center; background-color: #DBE2EF; border-radius: 15px;width: 800px;padding: 5px 15px 5px 15px">
              <label style="background: transparent; margin-right: 5px;color: #3F72AF">
                {{ job.jobId }}
              </label>
              <label :class="matchClass(job.match)" style="background: transparent; margin-left: 5px;">
                {{ job.match }}
              </label>
            </div>
            <el-icon size="36px" color="#3F72AF" @click="next(index)" style="margin-top: 10px"><ArrowRightBold /></el-icon>
          </el-row>
        </div>
      </el-col>
    </el-row>
  </div>
  <el-dropdown placement="bottom" style=" z-index: 99;position: absolute; top: 1%; right: 2%; transform: translateY(50%);" size="large">
    <span class="dropdown"> 我的 </span>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item @click="resume">AI简历</el-dropdown-item>
        <el-dropdown-item @click="myDeliver">我的投递</el-dropdown-item>
        <el-dropdown-item @click="exit">退出登录</el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<style scoped>
@import "../assets/css/global.css";
.post_label {
  background-color: #DBE2EF;
  color: #3F72AF;
  font-size: 32px;
  padding: 0 10px 5px 10px;
  font-weight: bold;
  border-radius: 15px;
}
.green-match {
  color: green;
}
.red-match {
  color: red;
}
.dropdown{
  background-color: #f9f7f7;
  color: #3F72AF;
  width: 150px;
  height: 30px;
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  border-radius: 10px;
}
.dropdown:hover{
  background-color: #3F72AF;
  color: #f9f7f7;
  width: 150px;
  height: 30px;
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  border-radius: 10px;
}
:deep(.el-tooltip__trigger:focus-visible) {
  outline: unset;
}
</style>